import React, { FC, useState } from 'react';
import { View, Text } from '@tarojs/components';
import { styled } from 'linaria/react';
import { useClassName } from '@/utils/index';
import { Input } from 'antd-mobile';
import PayItem from './PayItem/PayItem';
import { usePayList, changePayStatus, payItem } from './usePayList';
export interface IProps extends ICompProps {
    paylistArr:payItem[],
    setPayListArr:Function,
    disCountCode:string,
    setDisCountCode:Function
}
PayPageCotent.defaultProps = {} as Partial<IProps>;
function PayPageCotent(props: IProps) {
    const { className, style, paylistArr, setPayListArr,setDisCountCode } = props;
    const localClassName = useClassName('PayPageCotent', className);
    const handleClick = (val) => {
        changePayStatus(paylistArr, setPayListArr, val);
    };
    const handleChange = (event) => {
        setDisCountCode(event)
    }
    return (
        <RootView className={localClassName} style={style}>
            {paylistArr.map((item) => (
                <PayItem
                    onClick={() => {
                        handleClick(item.val);
                    }}
                    key={item.val}
                    className="payitem"
                    payText={item.text}
                    icon={item.icon}
                    isChecked={item.isChecked}
                    iconColor={item.iconColor}></PayItem>
            ))}
            <Input onChange={handleChange} className="input" placeholder="输入折扣码" />
        </RootView>
    );
}
export default React.memo(PayPageCotent as FC<IProps>);
const RootView = styled(View)`
    &.PayPageCotent {
        margin-top: 94px;
        .payitem + .payitem{
            margin-top: 32px;
        }
        .input {
            --color: #333333;
            --font-size: 28px;
            --placeholder-color: #cbcdd6;
            width: 686px;
            height: 90px;
            background: #f5f5f5;
            border-radius: 16px;
            margin: 0 auto;
            padding: 0 32px;
            margin-top: 60px;
        }
    }
`;
